<!--
--地址级联
getaddress 获取地址
未完
-->
<template>
    <div>
        <el-cascader 
        :props="defaultParams" 
        :options="province"
        v-model="address"
        @change="getaddress"
        placeholder="请选择地址"
        clearable
        props.expandTrigger="hover">
        </el-cascader>
    </div>
</template>

<script>
import addressdata from '../../assets/JSON/address.json'
export default {
    name: 'AddressCascader',
    data() {
        return {
            province:[],
            address:[],
            defaultParams: {
                label: 'AddName',
                value: "AddName",
                children: 'children'
            }
        }
    },
    created() {
        this.init()
        this.getcity()
    },
    methods: {
        getcity() {
            Object.freeze(addressdata)
            for(let i = 0;i<30;i++) {
                this.province[i].children = []
                const num = i+1
                addressdata.map(item => {
                    if(item.TopID == num) {
                        this.province[i].children.push(item)
                    }
                })
                const city = this.province[i].children
                for(let j = 0; j<city.length;j++) {
                    const id = this.province[i].children[j].ID
                    let area = []
                    addressdata.map(item => {
                        if(item.TopID == id) {
                            area.push(item)
                        }
                    })
                    this.province[i].children[j].children = area
                }
            }
        },
        init() {
            this.province = addressdata.slice(0,31)
        },
        getaddress() {
            // 数组【"广东省", "广州市", "海珠区"】
            this.$emit('getaddress',this.address)
        }
    }
}
</script>

<style lang="scss" scoped>
</style>